"use client"

import { useState, useEffect,useRef } from "react"
import { View, StyleSheet, TouchableOpacity, ScrollView, Text } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
import { LinearGradient } from "expo-linear-gradient"
import { ArrowLeft } from "lucide-react-native"
import { useRouter, useLocalSearchParams } from "expo-router"
import { theme } from "../constants/theme"
import { TabNavigation } from "../components/wordDetail/TabNavigation"
import { WordDetailView } from "../components/wordDetail/WordDetailView"
import { NaturalReadingView } from "../components/wordDetail/NaturalReadingView"
import { WordAffixView } from "../components/wordDetail/WordAffixView"
import { PhoneticView } from "../components/wordDetail/PhoneticView"

// 模拟的单词数据
const WORD_DATA = {
    word: "blessing",
    phonetics: {
        uk: "['blesɪŋ]",
        us: "['blesɪŋ]",
    },
    meanings: ["祝福", "幸事", "祷告"],
    forms: [
        {
            type: "名词",
            word: "blessing",
            meaning: "祝福；幸事；祷告",
        },
        {
            type: "动词",
            word: "bless",
            meaning: "祝福；保佑",
        },
        {
            type: "形容词",
            word: "blessed",
            meaning: "幸福的；受祝福的",
        },
    ],
    phrases: [
        {
            phrase: "mixed blessing",
            meaning: "祸福参半的事情",
        },
        {
            phrase: "a blessing in disguise",
            meaning: "因祸得福",
        },
        {
            phrase: "count one's blessings",
            meaning: "感恩自己所拥有的",
        },
    ],
    examples: [
        {
            en: "I think good health is a blessing.",
            cn: "我认为健康是一种福气。",
            highlights: ["blessing"],
        },
        {
            en: "A happy family is truly a blessing.",
            cn: "幸福的家庭确实是一种福气。",
            highlights: ["blessing"],
        },
        {
            en: "This beautiful scenery is such a blessing to our eyes.",
            cn: "这美丽的景色对我们的眼睛来说是一种福气。",
            highlights: ["blessing"],
        },
        {
            en: "Having a good friend is a blessing in life.",
            cn: "有一个好朋友是生活中的一种福气。",
            highlights: ["blessing"],
        },
        {
            en: "Freedom is a blessing that we should cherish.",
            cn: "自由是我们应该珍惜的一种福气。",
            highlights: ["blessing"],
        },
        {
            en: "The opportunity to study is a blessing.",
            cn: "有学习的机会是一种福气。",
            highlights: ["blessing"],
        },
    ],
    etymology: {
        content: `"Blessing" 这个单词的词源可以追溯至古英语 "blessing" 或 "blesian" 的变体，其根本来自于原始日耳曼语的 blētsian，该词与"祝福"和"祈祷"有关。这里的关键词"祝福"和"清告"与原始含义紧密相连，因为"祝福"通常指的是对某人或某事表达良好愿望或祈求神灵保佑的行为，而"祈告"则是对神明的直接祈求或崇拜。

至于"幸事"和"批准"，虽然这两个词在现代语境中与"blessing"有关联，但它们并不是"blessing"一词的直接词源含义。不过，可以认为"幸事"与"祝福"带来的好运和正面结果有关，而"批准"可能间接地与某种形式的认可或甚至授权有关，尤其是在宗教或文化层面上。

因此，词源上，"blessing"主要关联于"祝福"和"祈祷"这两个关键词，而"幸事"和"批准"则属于该词在现代使用中的扩展含义。`,
    },
    // 添加词缀数据
    affix: {
        word: "constitute",
        phonetic: "/ˈkɒnstɪtjuːt/",
        meaning: "构成；被视为；成立",
        prefix: {
            text: "con",
            description: "用于c, d, f, g, j, n, q, s, t, v前，com-的变体，表示'共同，一起；加强意义'。",
        },
        root: {
            text: "stitute",
            description: "来源于拉丁语，表示'放'。",
        },
        explanation: "constitute：各个部分放到一起，即组成",
    },
}

export default function WordDetailScreen() {
    const router = useRouter()
    const params = useLocalSearchParams()
    const [activeTab, setActiveTab] = useState("word")

    const handleBack = () => {
        router.back()
    }
    const scrollViewRef = useRef(null)
    // 当切换标签页时，滚动到顶部
    useEffect(() => {
        if (scrollViewRef.current) {
            scrollViewRef.current.scrollTo({ x: 0, y: 0, animated: true })
        }
    }, [activeTab])
    return (
        <SafeAreaView style={styles.container} edges={["top"]}>
            <LinearGradient
                colors={theme.colors.neutral.backgroundGradient}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}
                style={styles.gradientBackground}
            >
                {/* 头部返回按钮和标题 */}
                <View style={styles.header}>
                    <TouchableOpacity onPress={handleBack} style={styles.backButton}>
                        <ArrowLeft size={24} color={theme.colors.neutral.black} />
                    </TouchableOpacity>
                    <View style={styles.titleContainer}>
                        <Text style={styles.title}>{WORD_DATA.word}</Text>
                    </View>
                    <View style={styles.headerRight} />
                </View>

                {/* 选项卡导航 */}
                <TabNavigation activeTab={activeTab} onTabChange={setActiveTab} />

                {/* 内容区域 */}
                <ScrollView
                    ref={scrollViewRef}
                    style={styles.scrollView}
                    showsVerticalScrollIndicator={false}
                    contentContainerStyle={styles.scrollContent}
                >
                    {activeTab === "word" && <WordDetailView word={WORD_DATA} />}
                    {activeTab === "natural" && (
                        <NaturalReadingView
                            word={{
                                word: WORD_DATA.word,
                                syllables: ["bl", "e", "ss", "ing"],
                                phoneticSyllables: ["/bl/", "/e/", "/s/", "/ɪŋ/"],
                                naturalReadingData: [
                                    { letter: "b", phonetic: "/b/", color: "#5B8EF4" },
                                    { letter: "l", phonetic: "/l/", color: "#5B8EF4" },
                                    { letter: "e", phonetic: "/e/", color: "#FF9500" },
                                    { letter: "ss", phonetic: "/s/", color: "#5B8EF4" },
                                    { letter: "ing", phonetic: "/ɪŋ/", color: "#34C759" },
                                ],
                            }}
                        />
                    )}
                    {activeTab === "affix" && <WordAffixView word={WORD_DATA.affix} />}
                    {activeTab === "phonetic" && (
                        <PhoneticView
                            word={{
                                word: "constitute", // 使用 WORD_DATA.affix.word，因为图片中显示的是 constitute
                                phonetic: "/ˈkɒnstɪtjuːt/", // 使用 WORD_DATA.affix.phonetic
                                phonemes: ["/k/", "/ɒ/", "/n/", "/s/", "/t/", "/ɪ/", "/t/", "/ju/", "/t/"],
                                meaning: "构成；被视为；成立", // 使用 WORD_DATA.affix.meaning
                            }}
                        />
                    )}
                    {/* 其他标签页的内容将在后续实现 */}
                </ScrollView>
            </LinearGradient>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    gradientBackground: {
        flex: 1,
    },
    header: {
        flexDirection: "row",
        alignItems: "center",
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
    },
    backButton: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(255, 255, 255, 0.5)",
    },
    scrollView: {
        flex: 1,
    },
    scrollContent: {
        paddingBottom: theme.spacing.xxxl,
    },
    titleContainer: {
        flex: 1,
        alignItems: "center",
    },
    title: {
        fontSize: theme.fontSize.xl,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
    },
    headerRight: {
        width: 40,
    },
})

